/* eslint-disable no-unused-vars */
import React from "react";
import { Tabs, theme ,Form} from "antd";
import { Scrollbars } from "react-custom-scrollbars";
import Library from "./components/library";
import Template from "./components/template";
import DragAndDropFormBuilder from "./components/table";


const Body = () => {
  const {
    token: { colorBgContainer, borderRadiusLG, colorBgLayout },
  } = theme.useToken();
  const [form] = Form.useForm();


  return (
    <div
      className="center"
      style={{
        height: "100vh",
        backgroundColor: colorBgLayout,
      }}
    >
      <div
        style={{
          background: colorBgContainer,
          overflow: "auto",
          left: 0,
          top: 0,
          bottom: 0,
          height: "100%",
          width: 260,
        }}
        className="diycollspan element"
      >
        <Tabs
          centered={true}
          items={[
            {
              key: "0",
              label: "组件库",
              children: <Library form={form}/>,
            },
            {
              key: "1",
              label: "表单模板",
            },
          ]}
        ></Tabs>
      </div>
      <div
        style={{
          margin: "16px",
          overflow: "initial",
          height: "calc(100vh - 32px)",
          flex: 1,
          border: "1px dashed #aaa",

        }}
      >
        <Scrollbars
          thumbMinSize={10}
          autoHide
          style={{ width: "100%", height: "100%" }}
          hideTracksWhenNotNeeded={true}
        >
          <div
            style={{
              borderRadius: borderRadiusLG,
            }}
          >
            <DragAndDropFormBuilder form={form}></DragAndDropFormBuilder>
          </div>
        </Scrollbars>
      </div>
      <div
        style={{
          background: colorBgContainer,
          overflow: "auto",
          height: "100%",
          left: 0,
          top: 0,
          bottom: 0,
          width: 260,
          paddingTop:12
        }}
        className="diycollspan element"
      >
        <Template form={form}></Template>
      </div>
    </div>
  );
};
export default Body;
